<template>
	<!-- 	<view class="number-box">
		<uni-section :title="data.title+': '+ data.totalVal" type="line" padding>
			<uni-number-box :min="data.min" :max="data.max" :step="data.step" :value="data.totalVal" @change="change" />
			<u-button type="info" text="确定" class="but" @click="cancel" v-if="isShow">取消</u-button>
			<u-button type="primary" text="确定" class="but" v-if="isShow" @click="methodVal()">保存</u-button>
		</uni-section>

		<u-divider text=""></u-divider>
	</view> -->

	<view class="wrapper">
		<!-- 上部分 -->
		<view class="top">
			<!-- 左侧标题 -->
			<view class="left-titles">
				<text class="title">
					{{data.title+': '}}
					<text style="color:#666;">{{data.totalVal}}</text>
					{{' '+data.unit}}
				</text>
				<text class="subtitle">{{data.subtitle}}</text>
			</view>
			<!-- 右侧数字框 -->
			<view class="right-number-box">
				<uni-number-box :min="data.min" :max="data.max" :step="data.step" :value="data.totalVal"
					@change="change" :background="backGroundColor"></uni-number-box>
			</view>
		</view>
		<!-- 下部分按钮 -->
		<view class="buttons">
			<button type="info" @click="cancel" v-if="isShow" class="cancel">取消</button>
			<button type="primary" @click="methodVal()" v-if="isShow" class="save">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				totalVal: Number,
				title: String,
				subtitle: String,
				unit: String,
				min: Number,
				max: Number,
				step: Number,
				functions: String,
				backGroundColor: String,
			},
			backGroundColor:String,
			
		},
		data() {
			return {
				isShow: false,
				originalval: 0
			}
		},
		created() {
			setTimeout(() => {
				this.originalval = this.data.totalVal
			}, 100)
		},
		methods: {
			// 方法传递
			methodVal() {
				this.$emit(`${this.data.functions}`, this.data.totalVal);
				this.isShow = false;
			},
			change(value) {
				this.data.totalVal = value
				this.isShow = true
			},
			// 取消
			cancel() {
				this.isShow = false;
				this.data.totalVal = this.originalval


			}
		}
	}
</script>

<style scoped>
	/* 	.but {
		display: inline;
		position: relative;
		left: 70%;
		margin-left: 5px;
		padding: 5px 10px 5px 10px;
	} */

	.number-box {
		padding: 0 5px;
	}

	.item-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* width: 750rpx; */
	}

	.number-box-button {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* 自定义 */

	.wrapper {
		display: flex;
		flex-direction: column;
	}

	.top {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left-titles {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.title {
		font-size: 15px;
		margin-bottom: 3px;
	}

	.subtitle {
		font-size: 11px;
		color: #999;
	}

	/* 	.right-number-box {
		margin-right: 10px;
	} */

	uni-number-box {
		width: 200px;
	}

	.uni-numbox__value {
		width: 200px;
	}

	.buttons {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 3px;
	}

	.buttons button {
		line-height: 2;
		font-size: 13px;
		margin: 0;
		margin-left: 12px;
	}

	.cancel {
		/* background-color: #edeff4; */
		/* background-color: #edf6ff; */
		
	}

	.save {
		/* background-color: #465e8d; */
		background-color: #007BFF;
	}

	.buttons button::after {
		/* border: 1px solid #e5e6ed; */
	}
</style>